<template>
   <div class="all">
        <div class="over1">
            <div class="top">
                <img class="top_logo" src="../../assets/adver_video_detail/tiktok_logo.png"/>
                <div class="top_title">
                    <h3>{{VideoAndCreater.vname}}</h3>
                </div>
                <div class="top_message">
                    <img src="../../assets/adver_video_detail/arcoDesign-caret-right.png"/>
                    <a class="top_message1">10.0万</a>
                    <img src="../../assets/adver_video_detail/ze-like-o.png"/>
                    <a class="top_message1">10.0万</a>
                     <img src="../../assets/adver_video_detail/ze-star-o.png"/>
                    <a class="top_message1">10.0万</a>
                     <img src="../../assets/adver_video_detail/iconPark-share-one.png"/>
                    <a class="top_message1">10.0万</a>
                    <img src="../../assets/adver_video_detail/if-fire-burn (2).png"/>
                    <a class="top_message2">179</a>
                    <a class="top_message3">发布时间：</a>
                     <a class="top_message3">{{VideoAndCreater.vreleasetime}}</a>
                </div>
            </div>
            <div class="center">
                <video class="center_vedio" :src="VideoAndCreater.vsource" controls="controls">
                </video>
            </div>
            <div class="right">
                <div class="right_1">
                    <img src="../../assets/adver_video_detail/fa-user-circle.png"/>
                    <a class="right_1_1">昵称：</a>
                    <a class="right_1_2">{{VideoAndCreater.creater.cname}}</a>
                    <div class="right_1_3">
                        <a>{{VideoAndCreater.creater.cemail}}</a>
                    </div>
                    <div class="right_1_4">
                        <a>{{VideoAndCreater.creater.cphone}}</a>
                    </div>
                </div>
                <div class="right_2">
                    <img class="right_2_1" src="../../assets/adver_video_detail/tiktok_logo.png"/>
                    <a class="right_2_2">{{VideoAndCreater.creater.others[0].othername}}</a>
                    <div class="right_2_3">{{VideoAndCreater.creater.others[0].othernum}}W</div>
                    <el-button @click="push()" class="right_2_4" type="warning">查看个人中心</el-button>
                </div>
                <div>
                    <div class="right_title_1"><a>视频简介</a></div>
                    <div class="right_title_2">
                        <a>{{VideoAndCreater.vintroduction}}</a>
                      
                    </div>
                    <div class="right_title_1_1"><a >广告要求</a></div>
                    <div class="right_title_2_1">
                        <a>{{VideoAndCreater.vrequirement}}</a>
                        <!-- <div>1、广告本身不破化视频的效果</div>
                        <div>2、广告能够贴合保护野生动物的主题</div>
                        <div>3、希望广告是公益类的产品</div>
                        <div>4、希望广告企业对了解、懂得、尊重动物保护事业</div>
                        <div>5、相关广告产品费用由双方共同商讨</div>
                        <div>6、.......................</div> -->
                        <!-- <div>5、相关广告产品费用由双方共同商讨</div>
                        <div>5、相关广告产品费用由双方共同商讨</div> -->
                    </div>
                </div>
            </div>
            <div class="but">
                <el-button @click="dialogForm2Visible = true;" class="but2_1" type="warning" >编辑</el-button>
                <el-button class="but2" type="info" >撤下</el-button>
            </div>
            <div>
                <div class="bottom" v-for="(item,index) in  AllvideoAdver" :key="index">
                    <div class="bottom2_item1">
                        <div class="bottom_item11">
                             <div class="img-">
                                <img class="fengmiana" :src="VideoAndCreater.fengmian"/>
                                <div class="img-1"></div>
                            </div>
                            <div class="item1_message">
                                <div class="item1_message_title">广告位{{index+1}}</div>
                                <div class="item1_message1">时间：{{item.apbegintime}}-{{item.apfinaltime}}</div>
                                <div class="item1_message1">场景：{{item.asession}}</div>
                                <div class="item1_message1">状态：已合作2个广告商</div>
                                <div class="item1_message1">大小：{{item.apsize}} 10%</div>
                            </div>
                            <div class="item_button22">
                                <el-button @click="dialogFormVisible = true"  class="item_button22_1" type="danger">查看详情</el-button>
                                <el-button @click="push3(item.apid)" class="item_button22_2" type="warning">交易中心</el-button>
                                <div>
                                    <el-button class="item_button22_3" type="info">撤下</el-button>
                                </div>
                            </div>
                            <div class="item_message_188">
                                <div class="item_message_1_1" v-for="(item2,index2) in item.cooperations" :key="index2">
                                    <a class="item_message_1_1_1">
                                        <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                        <a class="font_group">{{item2.advertisername}}</a>
                                    </a >
                                     <a class="item_message_1_2_18">
                                            <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                            <a class="font_group">{{item2.productname}}</a>
                                        </a>
                                        <a class="item_message_1_2_18">
                                            <img src="../../assets/producer_video_detail/iconPark-finance.png"/>
                                            <a class="font_group">{{item2.coprice}}W</a>
                                        </a>
                                        <a class="item_message_1_2_18">
                                            <img src="../../assets/producer_video_detail/iconPark-hourglass.png"/>
                                            <a class="font_group">{{item2.coplaybackvolume}}播放</a>
                                        </a>
                                </div>
                                <!-- <div>
                                    <div class="item_message_1_28" v-for="(item3,index3) in item.cooperations" :key="index3">
                                        <a class="item_message_1_2_18">
                                            <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                            <a class="font_group">{{item3.productname}}</a>
                                        </a>
                                        <a class="item_message_1_2_18">
                                            <img src="../../assets/producer_video_detail/iconPark-finance.png"/>
                                            <a class="font_group">{{item3.coprice}}W</a>
                                        </a>
                                        <a class="item_message_1_2_18">
                                            <img src="../../assets/producer_video_detail/iconPark-hourglass.png"/>
                                            <a class="font_group">{{item3.coplaybackvolume}}播放</a>
                                        </a>
                                    </div>
                                </div> -->
                                <!-- <div class="item_message_1_3"  v-for="(item4,index4) in item.cooperations" :key="index4">
                                    
                                </div>
                                <div class="item_message_1_4"  v-for="(item5,index5) in item.cooperations" :key="index5">
                                    
                                </div> -->
                            </div>
                        </div>
                    </div>

                <!-- <div class="bottom2_item2">
                    <div>
                        <div class="img-">
                            <div class="img-12"></div>
                        </div>
                        <div class="item1_message">
                            <div class="item1_message_title">广告位1</div>
                            <div class="item1_message1">时间：1:45-1:48,1:54-1:59,2:03-2:09</div>
                            <div class="item1_message1">场景：桌面</div>
                            <div class="item1_message1">状态：待合作</div>
                            <div class="item1_message1">大小：3:4 10%</div>
                        </div>

                        <div class="item_message_1">
                            <div class="item_message_1_1">
                                <div class="item_message_1_1_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                    <a class="font_group"></a>
                                </div >
                                <div class="item_message_1_1_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                    <a class="font_group"></a>
                                </div>
                                <div class="item_message_1_1_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                    <a class="font_group"></a>
                                </div>
                            </div>
                            <div class="item_message_1_2">
                                <div class="item_message_1_2_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                    <a class="font_group"></a>
                                </div>
                                <div class="item_message_1_2_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                    <a class="font_group"></a>
                                </div>
                                <div class="item_message_1_2_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                    <a class="font_group"></a>
                                </div>
                            </div>

                        </div>
                        <div class="item_button22-2">
                            <el-button @click="push3()"  class="item_button22_2_2" type="warning">交易中心</el-button>
                            <div>
                                <el-button class="item_button22_3" type="info">撤下</el-button>
                            </div>
                        </div>


                    </div>
                </div>

                <div class="bottom2_item3">
                    <div>
                        <div class="img-">
                            <div class="img-13"></div>
                        </div>
                        <div class="item1_message">
                            <div class="item1_message_title">广告位1</div>
                            <div class="item1_message1">时间：1:45-1:48,1:54-1:59,2:03-2:09</div>
                            <div class="item1_message1">场景：桌面</div>
                            <div class="item1_message1">状态：待合作</div>
                            <div class="item1_message1">大小：3:4 10%</div>
                        </div>

                        <div class="item_message_1">
                            <div class="item_message_1_1">
                                <div class="item_message_1_1_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                    <a class="font_group"></a>
                                </div >
                                <div class="item_message_1_1_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                    <a class="font_group"></a>
                                </div>
                                <div class="item_message_1_1_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                    <a class="font_group"></a>
                                </div>
                            </div>
                            <div class="item_message_1_2">
                                <div class="item_message_1_2_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                    <a class="font_group"></a>
                                </div>
                                <div class="item_message_1_2_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                    <a class="font_group"></a>
                                </div>
                                <div class="item_message_1_2_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                    <a class="font_group"></a>
                                </div>
                            </div>
                        </div>
                        <div class="item_button22-3">
                            <el-button @click="push3()"  class="item_button22_2_2" type="warning">交易中心</el-button>
                            <div>
                                <el-button class="item_button22_3" type="info">撤下</el-button>
                            </div>
                        </div>


                    </div>
                </div>

                <div class="bottom2_item4">
                    <div>
                        <div class="img-">
                            <img class="prohibit" src="../../assets/producer_video_detail/riLine-forbid-2-line@1x.png"/>
                            <div class="img-14"></div>
                        </div>
                        <div class="item1_message">
                            <div class="item1_message_title">广告位3</div>
                            <div class="item1_message1">时间：1:45-1:48,1:54-1:59,2:03-2:09</div>
                            <div class="item1_message1">场景：桌面</div>
                            <div class="item1_message1">状态：待合作</div>
                            <div class="item1_message1">大小：3:4 10%</div>
                        </div>

                        <div class="item_message_1">
                            <div class="item_message_1_1">
                                <div class="item_message_1_1_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                    <a class="font_group"></a>
                                </div >
                                <div class="item_message_1_1_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                    <a class="font_group"></a>
                                </div>
                                <div class="item_message_1_1_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad.png"/>
                                    <a class="font_group"></a>
                                </div>
                            </div>
                            <div class="item_message_1_2">
                                <div class="item_message_1_2_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                    <a class="font_group"></a>
                                </div>
                                <div class="item_message_1_2_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                    <a class="font_group"></a>
                                </div>
                                <div class="item_message_1_2_1">
                                    <img src="../../assets/adver_video_detail/iconPark-ad-product.png"/>
                                    <a class="font_group"></a>
                                </div>
                            </div>
                        </div>
                        <div class="item_button22-3">
                            <div>
                                <el-button class="item_button22_3" type="info">已撤下</el-button>
                            </div>
                        </div>


                    </div>
                </div> -->
                </div>
            </div>
        </div>
          <el-dialog width="600px" class="trade_edit" :visible.sync="dialogForm2Visible">
            <el-form class="trade_edit_form">

                <el-form-item  label="视频简介" :label-width="formLabelWidth">
                    <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model="dialogMessage.textarea1">
                    </el-input>
                </el-form-item>

                 <el-form-item  label="广告要求" :label-width="formLabelWidth">
                    <el-input
                        type="textarea"
                        :rows="6"
                        placeholder="请输入内容"
                        v-model="dialogMessage.textarea2">
                    </el-input>
                </el-form-item>

            </el-form>
            <div class="trade_edit_form_button">
                <el-button class="trade_edit_form_button1_21" @click="dialogForm2Visible = false; ChangeMessage();" type="warning">保存</el-button>
                <el-button class="trade_edit_form_button2_21" type="info" @click="dialogForm2Visible = false">取消</el-button>
            </div>
        </el-dialog>

            <el-dialog width="700px" class="trade_edit" :visible.sync="dialogFormVisible">
            <el-form class="trade_edit_form">
                 <el-table
                    :data="tableData"
                    style="width: 100%"
                    >
                    <el-table-column
                    prop="date"
                    label="品牌"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="name"
                    label="雅诗兰黛"
                    width="170">
                    </el-table-column>
                    <el-table-column
                    prop="address"
                    label="雅迪电动车"
                    width="170">
                    </el-table-column>
                    <el-table-column
                    prop="moutain"
                    label="百岁山"
                    width="170">
                    </el-table-column>
                </el-table>

            </el-form>
            <div class="trade_edit_form_button22">
                <el-button class="trade_edit_form_button1_211" @click="dialogFormVisible = false" type="warning">查看产品</el-button>
                <el-button class="trade_edit_form_button1_212" @click="dialogFormVisible = false" type="warning">查看产品</el-button>
                 <el-button class="trade_edit_form_button1_213" @click="dialogFormVisible = false" type="warning">查看产品</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name:'producer_video_detail',
    data() {
        return {
             dialogForm2Visible:false,
             dialogFormVisible:false,
             formLabelWidth:'',
             dialogMessage:{
                textarea2:'',
                textarea1:''  ,
             },
             video_intro:'~视频中展现的是一直棕熊在小溪中，现在的他在就已经饥肠辘辘在小溪中寻找着食物的踪迹，但一无所获。其实这只熊早早经过了万里的迁徙，因为人类们肆意的环境破坏，他不得不离开他的家园到处流浪。居无定所的他之后的日子又会是怎样呢？我们不得而知，面临他的是死亡还是救赎？小溪流淌，发出哗哗哗的水流声。他的心里也流淌着哗哗的泪！！！',
             tableData: [
                {
                    date: '产品',
                    name: '粉底液',
                    address: '小小电动车',
                    moutain:'新年促销活动',
                },
                 {
                    date: '广告类型',
                    name: '播放量',
                    address: '播放量',
                    moutain:'播放量',
                },
                 {
                    date: '合作内容',
                    name: '300次播放',
                    address: '300次播放',
                    moutain:'300次播放',
                },
                 {
                    date: '合作意向',
                    name: 'xxxxxxxxxxx',
                    address: 'xxxxxxxxxxx',
                    moutain:'xxxxxxxxxxx',
                },
                   {
                    date: '成交价格',
                    name: '3W',
                    address: '3W',
                    moutain:'3W',
                },
                {
                    date: '合作时间',
                    name: '2021/1/12 13:08:09',
                    address: '2021/1/12 13:08:09',
                    moutain:'2021/1/12 13:08:09',
                },
                 {
                    date: '电话号码',
                    name: '13138203948',
                    address: '13138203948',
                    moutain:'13138203948',
                },
                {
                    date: '电子邮箱',
                    name: '2726187738@qq.com',
                    address: '2726187738@qq.com',
                    moutain:'2726187738@qq.com',
                },
                 {
                    date: '查看产品',
                },
                ],
                 //视频和创作者的信息
                VideoAndCreater:{},
                //所有的广告位
                AllvideoAdver:[],

            }
    },
    methods:{
        push:function(){
            this.$router.push({path:'/producer_space'})
        },
        // push2(){
        //     this.$router.push({path:'/login'})
        // },
         push3(apid){
             sessionStorage.setItem('apid',apid)
            this.$router.push({path:'/producer_trade'})
        },
        //初始化界面的展现
        //videoMessage接口开始
        init(){
            //获取上个界面存储的ID
            var rams=JSON.parse(sessionStorage.getItem("vid"));
            // console.log(sessionStorage.getItem("vid"));
            console.log(rams);
            console.log(typeof(rams));
            console.log(rams=="1");
            console.log(typeof("1"))
            var rams2=Number(rams);
            console.log(rams2);
            // var params1=qs.stringify(sessionStorage.getItem("vid"));
            // console.log(params1);
            this.$axios({
               method:'post',
               url:'http://1.117.65.58:9001/videoandcreater/findallbyvid',
               params:{"vid":rams2},
            //    headers: {'Content-Type': 'application/json; charset=utf-8'},
            }).then(response=>{
            console.log(response);
            const arr =response.data.data;
            this.VideoAndCreater=arr;
            console.log(this.VideoAndCreater)
            // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
           }).catch(function(err){
               console.log(err)
           })
        },
        //videoMessage接口结束
        //单个视频下的所有广告位，接口开始
        videoAdver(){
            //获取上个界面存储的ID
            var params=JSON.parse(sessionStorage.getItem("vid"));
            console.log(params);
            params=Number(params)
            this.$axios({
               method:'post',
               url:'http://1.117.65.58:9001/advertiserSpace/findall',
               params:{"vid":params},
            }).then(response=>{
            console.log(response);
            const arr =response.data.data;
            this.AllvideoAdver=arr;
            console.log(this.AllvideoAdver)
            console.log(this.AllvideoAdver[0].cooperations)
            // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
           }).catch(function(err){
               console.log(err)
           })
        },
        //单个视频下的所有广告位，接口结束

        //修改视频简介和广告要求接口开始
        ChangeMessage(){
            var params=JSON.parse(sessionStorage.getItem("vid"));
            console.log(params);
            params=Number(params)
            this.$axios({
               method:'post',
               url:'http://1.117.65.58:9001/video/videoedit',
               params:{"vid":params,
               "vrequirement":this.dialogMessage.textarea2,
               "videointroduction":this.dialogMessage.textarea1}
            }).then(response=>{
            console.log(response);
            this. init();
            // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
           }).catch(function(err){
               console.log(err)
           })
            this.videoAdver();
            
        },
        //修改视频简介和广告要求接口结束
    },
    mounted(){
        this.init();
        this.videoAdver();
    }

}
</script>

<style scoped>
@import "../../style/producer_video_detail.css";
@import "../../style/adver_vedio_detail.css";

</style>